<script setup lang="ts">
import dayjs from 'dayjs'
import assetsApi from '@/api/modules/assets'

const dialogVisible = ref(false)
const tableData = ref<any>([])
const formData = ref<any>({})
const orderId = ref('')
const loading = ref(false)

function open({ data }: any) {
  orderId.value = data.ObjID
  dialogVisible.value = true
  formData.value = data
  getTableData()
}

function close() {
  dialogVisible.value = false
  formData.value = {}
  orderId.value = ''
}

class DeviceRow {
  constructor(data: any) {
    Object.assign(this, data)
  }
}

function getTableData() {
  loading.value = true
  assetsApi.GetOrderFormAssetCodes({ orderFormObjID: orderId.value }).then((res) => {
    tableData.value = Object.keys(res).map((key) => {
      return new DeviceRow({
        name: key,
        isIn: res[key],
      })
    })
    loading.value = false
  }, () => {
    loading.value = false
  })
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    title="订单详情"
    width="80%"
    top="1%"
    draggable
    @closed="close"
  >
    <div class="max-h-[65vh] overflow-y-auto">
      <el-descriptions title="详情">
        <el-descriptions-item label="订单日期：">
          {{ formData.PlaceDate }}
        </el-descriptions-item>
        <el-descriptions-item label="生产厂家：">
          {{ formData.AssetFactoryName }}
        </el-descriptions-item>
        <el-descriptions-item label="备注：">
          {{ formData.Remark }}
        </el-descriptions-item>
        <el-descriptions-item label="产品名称：">
          {{ formData.AssetModelClassifyName }}
        </el-descriptions-item>
        <el-descriptions-item label="设备编号范围：">
          {{ formData.AssetCodeSNStart }} - {{ formData.AssetCodeSNEnd }}
        </el-descriptions-item>
        <el-descriptions-item label="收货地点：">
          {{ formData.RecAddress }}
        </el-descriptions-item>
        <el-descriptions-item label="约定发货日期：">
          {{ dayjs(formData.StipulateDate).format('YYYY-MM-DD') }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人：">
          {{ formData.Recipient }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话：">
          {{ formData.RecipientTel }}
        </el-descriptions-item>
      </el-descriptions>
      <vxe-table
        border
        height="500px"
        :data="tableData"
        :loading="loading"
        :row-config="{ isCurrent: true }"
      >
        <VxeColumn type="seq" title="序号" width="150" />
        <VxeColumn field="name" title="编号" />
        <VxeColumn field="isIn" title="是否入库">
          <template #default="{ row }">
            {{ row.isIn ? '已入库' : '未入库' }}
          </template>
        </VxeColumn>
      </vxe-table>
    </div>
  </el-dialog>
</template>
